xyy-m/src/pages/t/[id].client.vue

<template>
  <div class="pb-120">
    <TravelProjectDetailBanner
      :banner-list="detailData?.tourismFile?.fileUrlsAfterConvert"
    />
    <TravelProjectDetailBaseInfo :detail-data="detailData" />
    <div class="h-10 bg-[#E6E6E6]"></div>
    <div class="px-15">
      <TravelProjectDetailBookInfo
        v-model:startDate="bookInfo.startDate"
        v-model:adultNumber="bookInfo.adultNumber"
        v-model:childrenNumber="bookInfo.childrenNumber"
        :calendar-data="calendarData"
        :detail-data="detailData"
      />
      <TravelProjectDetailSellingPoint
        v-if="detailData?.sellingPoint"
        :detail-data="detailData"
        class="mt-20"
      />
      <TravelProjectDetailSpecialTips class="mt-20" />
      <TravelProjectDetailDetails :detail-data="detailData" class="mt-20" />
    </div>
    <TravelProjectDetailBottomBar
      :total-price="totalPrice"
      :detail-data="detailData"
      :loading="submitLoading"
      @onOk="handleSubmit"
    />
  </div>
</template>

<script setup>
const id = useRouteParam("id");

const bookInfo = reactive({
  startDate: null,
  adultNumber: 1,
  childrenNumber: 0,
});

const { data: detailData, status } = await useMyFetch(
  `website/tourism/project/detail?id=${id.value}`
);

const dayjs = useDayjs();
const calendarData = ref({});
async function getCalendarData() {
  const { data } = await request("/website/tourism/project/viewDatePrice", {
    query: {
      projectId: id.value,
    },
  });
  calendarData.value = data.tourismProjectDatePriceVos ?? {};
  const minDay = dayjs.min(
    Object.keys(calendarData.value).map((e) => dayjs(e))
  );
  bookInfo.startDate =
    minDay === null ? null : dayjs(minDay).format("YYYY-MM-DD");
}

const totalPrice = ref("");

watch(
  bookInfo,
  () => {
    // 计算总价
    const calendarInfo = calendarData.value[bookInfo.startDate] ?? {
      adultPrice: 0,
      childrenPrice: 0,
    };
    totalPrice.value = `${
      bookInfo.adultNumber * calendarInfo.adultPrice +
      bookInfo.childrenNumber * calendarInfo.childrenPrice
    }`;
  },
  { deep: true }
);

const route = useRoute();

const useAuth = useAuthStore();

const { token } = storeToRefs(useAuth);

async function handleSubmit() {
  if (!token.value) {
    await navigateTo({
      path: "/login",
      replace: true,
      query: {
        redirect: route.fullPath,
      },
    });

    return;
  }
  handleSubmitInfo();
}

const submitLoading = ref(false);
function handleSubmitInfo() {
  submitLoading.value = true;
  request("website/tourism/project/bookProject", {
    method: "post",
    body: {
      tourBookInfoDto: {
        projectId: id.value,
        type: "1",
        ...bookInfo,
      },
    },
  })
    .then(({ data }) => {
      submitLoading.value = false;
      if (data === 1) {
        showDialog({
          title: "预定成功",
          message: "恭喜预定成功我们会尽快和您取得联系",
        }).then(() => {});
      } else if (data === 2) {
        showDialog({
          title: "您已预定",
          message: "我们会尽快和您取得联系",
        }).then(() => {
          // on close
        });
      }
    })
    .catch(() => {
      submitLoading.value = false;
    });
}

onMounted(() => {
  getCalendarData();
});

// watch(
//   bookInfo,
//   () => {
//     console.log(bookInfo);
//   },
//   { deep: true }
// );
</script>

<style lang="scss" scoped></style>